<template>
  <div>
    <div v-if="programsZoneOption.length>0" v-loading="zoneLoading" class="table-main">

      <div class="table-left">
        <div
          v-for="(item,index) in programsZoneOption"
          :key="index"
          :name="index"
          class="pro-box"
          :class="[index === activeProgramIndex ? 'selected': '']"
          @click="handleChangePro(item,index)"
        >

          <div class="left-box">
            <div class="program-name">
              <el-checkbox v-model="item.checked" style="margin:0 5px" @change="changeCheck" />
              <span :style="{color: item.checked?'#3dc094':''}">{{ item.spaceName }}</span>
            </div>
            <el-tag v-show="item.selectItem.length>0" style="margin:auto" effect="dark" color="" type="warning">已选{{ item.selectItem.length }}条</el-tag>
          </div>
        </div>
      </div>
      <div v-if="programsZoneOption[activeProgramIndex] " class="table-right">
        <c-list :column="2">
          <c-list-item label="当前所属空间" :value="programsZoneOption[activeProgramIndex].spaceName" />
          <c-list-item label="建议上样面积" :value="programsZoneOption[activeProgramIndex].adviceSampleArea" />
          <c-list-item :span="2" label="空间说明" :value="programsZoneOption[activeProgramIndex].spaceDesc" />
          <c-list-item :span="2" label="区域说明" :value="programsZoneOption[activeProgramIndex].areaDesc" />、
          <c-list-item label="适用上样方式" dict-type-code="SUIT_DESIGN_WAY" :value="programsZoneOption[activeProgramIndex].suitDesignWay" />
        </c-list>
        <!-- <el-form>
          <el-row>
            <el-col :span="24">
              <el-form-item :required="true" label="本次申请设计方式:">
                <el-checkbox-group v-model="programsZoneOption[activeProgramIndex].currentApplyDesignWay" @change="changeInput">
                  <el-checkbox
                    v-for="item in handleToggle(programsZoneOption[activeProgramIndex].suitDesignWay)"
                    :key="item.dictCode"
                    :label="item.dictCode"
                  >{{ item.dictName }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form> -->
        <div class="qup-title-box"><span class="border" /><span>已选择方案明细</span>

          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="showAddProgram">添加</el-button>
          <span style="width:50px;font-size:12px;color:#606266;margin-left:10px"> <span style="color:red">*</span>实际报图面积(㎡)：<el-input v-model.number="programsZoneOption[activeProgramIndex].actualReportArea" style="width:120px" placeholder="请输入报图面积" @input="changeAreaSum" /></span>
        </div>
        <el-table
          style="width: 100%"
          :data="programsZoneOption[activeProgramIndex].selectItem"
          :height="300"
          header-row-class-name="table-list-header"
          highlight-current-row
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" label="序号" />
          <el-table-column prop="styleName" label="所属专区" />

          <el-table-column prop="seriesName" label="产品系列" />
          <el-table-column prop="sampleRecommendLevel" label="上样推荐层级">
            <template slot-scope="scope">{{ formaterData(sampleRecommendLevelOptions, scope.row.sampleRecommendLevel) }}</template>
          </el-table-column>
          <!-- <el-table-column prop="recommendFirstDesignWay" label="推荐首选设计方式">
            <template slot-scope="scope">{{ formaterData(shuldPayAmountOptions, scope.row.recommendFirstDesignWay) }}</template>
          </el-table-column>
          <el-table-column prop="recommendSecondDesignWay" label="推荐次选设计方式">
            <template slot-scope="scope">{{ formaterData(shuldPayAmountOptions, scope.row.recommendSecondDesignWay) }}</template>
          </el-table-column>
          <el-table-column prop="actualApplySampleWay" label="实际申请上样方式" min-width="140">
            <template slot="header">
              <span style="color: red">*</span>实际申请上样方式
            </template>
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.actualApplySampleWay"
                placeholder="请选择"
                @change="changeItemInput"
              >
                <el-option
                  v-for="i in handleChangeWay(programsZoneOption[activeProgramIndex].sampleSpaceOptions,(scope.row.recommendFirstDesignWay||'')+','+(scope.row.recommendSecondDesignWay||''))"
                  :key="i.dictCode"
                  :label="i.dictName"
                  :value="i.dictCode"
                />
              </el-select>
            </template>
          </el-table-column> -->
          <el-table-column prop="material" width="100" label="材质" />
          <el-table-column prop="marketPosition" label="市场定位">
            <template slot-scope="scope">{{ formaterData(marketPosition, scope.row.marketPosition) }}</template>
          </el-table-column>
          <el-table-column prop="sampleCode" label="样品编码" />
          <el-table-column prop="styleForm" label="款式形态">
            <template slot-scope="scope">{{ formaterData(styleFormOptions, scope.row.styleForm) }}</template>
          </el-table-column>
          <el-table-column prop="isMustUp" label="是否必上">
            <template slot-scope="scope">{{ scope.row.isMustUp===1?'是':'否' }}</template>
          </el-table-column>
          <el-table-column prop="recommendLevel" label="系列推荐级别">
            <template slot-scope="scope">{{ formaterData(recommendLevelOptions,scope.row.recommendLevel||scope.row.seriesRecommendedLevel) }}</template>
          </el-table-column>

          <el-table-column width="150" show-overflow-tooltip prop="seriesDesc" label="系列说明" />

          <el-table-column label="操作" width="80" fixed="right">
            <template v-slot="scope">
              <el-button v-show="!scope.row.isMustUp" class="my-button" type="text" size="mini" @click="handleDelete(scope.row,scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-else class="no-data">
      暂无方案
    </div>
    <AddDlg
      v-if="showAddDlg"
      :program-id="activeProgramId"
      :init-data="selectItem"
      :checked="activeChecked"
      :visible.sync="showAddDlg"
      :space-name="spaceName"
      @change="addProgram"
    />
  </div>
</template>
<script>
import { formaterData } from '@/utils'
import mixin from '../mixins'
import AddDlg from './addDlg.vue'
export default {
  name: 'Cupboard',
  components: { AddDlg },
  mixins: [mixin],
  props: {
    area: {
      type: Number,
      default: 0
    },
    programId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formaterData,
      showAddDlg: false,
      areaZone: 'Q003',
      checked: true,
      selectItem: [],
      tableSelected: [],
      filtersRaw: []
    }
  },
  watch: {
    // shuldPayAmountOptions: {
    //   handler(v) {
    //     this.setOption()
    //   },
    //   immediate: true
    // },
    // programsZoneOption: {
    //   handler(v) {
    //     this.setOption()
    //   },
    //   immediate: true
    // }
  },
  methods: {
    // 返回实际申请上样方式的下拉数据
    handleChangeWay(data1, data2) {
      const returnData = []
      const list = data2 ? data2.split(',') : []
      this.shuldPayAmountOptions.forEach(row => {
        list.forEach(item => { if (row.dictCode === item) returnData.push({ dictCode: row.dictCode, dictName: row.dictName }) })
      })

      const obj = {}
      let rows = [...returnData, ...data1]
      // 去重
      rows = rows.reduce(function(item, next) {
        obj[next.dictCode] ? '' : obj[next.dictCode] = true && item.push(next)
        return item
      }, [])
      return rows
    },
    setOption(data) {
      this.programsZoneOption.forEach(v => {
        this.$set(v, 'sampleSpaceOptions', [])
        this.shuldPayAmountOptions.forEach(row => {
          v.currentApplyDesignWay.forEach(item => { if (row.dictCode === item) v.sampleSpaceOptions.push({ dictCode: row.dictCode, dictName: row.dictName }) })
        })
      })
    },
    handleToggle(data) {
      if (!data) return
      const list = data.split(',')
      const tempArr = []
      this.shuldPayAmountOptions.forEach(row => {
        list.forEach(v => { if (v === row.dictCode) tempArr.push({ dictName: row.dictName, dictCode: row.dictCode }) })
      })
      return tempArr
    },
    changeAreaSum(data) {
      this.$set(this.programsZoneOption[this.activeProgramIndex], 'actualReportArea', Number(data))
      this.$set(this.programsZoneOption[this.activeProgramIndex], 'spaceReportArea', Number(data))
      this.$emit('select', this.programsZoneOption)
    },
    changeItemInput() {
      this.$emit('select', this.programsZoneOption)
    },
    changeInput(data) {
      this.$set(this.programsZoneOption[this.activeProgramIndex], 'sampleSpaceOptions', [])
      this.shuldPayAmountOptions.forEach(row => {
        data.forEach(item => { if (row.dictCode === item) this.programsZoneOption[this.activeProgramIndex].sampleSpaceOptions.push({ dictCode: row.dictCode, dictName: row.dictName }) })
      })
      // this.$set(this.programsZoneOption[this.activeProgramIndex], 'currentApplyDesignWay', data)
      this.$emit('select', this.programsZoneOption)
    },
    handleClose(index) {
      this.programsZoneOption[index].selectItem = []
      this.programsZoneOption[index].checked = false
      this.$emit('select', this.programsZoneOption)
    },
    showAddProgram() {
      // if (!this.programsZoneOption[this.activeProgramIndex].currentApplyDesignWay || this.programsZoneOption[this.activeProgramIndex].currentApplyDesignWay.length === 0) {
      //   this.$message.warning('请先选择申请设计方式')
      //   return
      // }
      this.spaceName = this.programsZoneOption[this.activeProgramIndex].spaceName
      this.activeChecked = this.programsZoneOption[this.activeProgramIndex].checked || false
      this.selectItem = this.programsZoneOption[this.activeProgramIndex].selectItem
      this.showAddDlg = true
    },
    addProgram(list, check) {
      this.programsZoneOption[this.activeProgramIndex].checked = check
      this.programsZoneOption[this.activeProgramIndex].selectItem = list
      this.$emit('select', this.programsZoneOption)
    }
  }
}
</script>
<style lang='scss' scoped>
.no-data{
  color: #999;
  line-height: 300px;
  display: flex;
  font-size: 18px;
  justify-content: center;
  align-items: center;
}
.pro-box{
  border-bottom: 1px solid #DCDFE6 ;
  height: 40px;
  cursor: pointer;
  line-height: 40px;
  .left-box{
    display: flex;
    justify-content:space-between;
    .program-name{
     max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}
  }
}
.selected{
  background-color: $qup-color-hover;
}
.el-divider--horizontal{
  margin: 10px 0;
}
  .table-main{
    width: 100%;
    display: flex;
    // height: 430px;
    .table-left{
      height: 500px;
      width: 20%;
      flex:1;
      overflow: scroll;
      padding-right: 10px;
      box-sizing: border-box;
      .check-all{
        display: flex;
        justify-content: space-between;
      }
    }
    .table-right{
      // height: 500px;
      width:80%;
      padding-left: 10px;
      .qup-title-box{
        line-height: 28px;
        height: 28px;
        margin-bottom: 10px;
      }
      .table-list-box{
        margin-top: 0;
      }
    }
  }
</style>
